<script src="/lib/layui/xm-select.js"></script>

<div class="layui-fluid" style="padding: 25px;">
    <form class="layui-form" method="post" style="margin-top:20px" lay-filter="component-form-group" id="popdataxqk">  
        <input type="hidden" id="sysID" name="sysID" value="0" />
        <input type="hidden" id="compile" name="compile" value="" />
        <input type="hidden" id="database" name="database" value="MYDXBDQKXQ" />
        <input type="hidden" id="oldfileName" name="oldfileName" value="" />

        <div class="layui-form-item" id="titleshow">
            <div class="layui-inline">
                <label class="layui-form-label">篇名</label>
                <div class="layui-input-inline" style="width: 420px;">
                    <input type="text" id="title" name="title" placeholder="请输入标题" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item" id="authorshow">
            <div class="layui-inline">
                <label class="layui-form-label">作者</label>
                <div class="layui-input-inline" style="width: 420px;">
                    <input type="text" id="author" name="author" placeholder="请输入作者" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">页码</label>
                <div class="layui-input-inline" style="width: 420px;">
                    <input type="text" id="physicalPage" name="physicalPage"  autocomplete="off"
                        class="layui-input">
                </div>
            </div>
        </div>
        
        <div class="layui-form-item" id="titleshow">
            <div class="layui-inline">
                <label class="layui-form-label">摘要</label>
                <div class="layui-input-inline" style="width: 420px;">
                    <textarea name="abstractCN" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
        </div>

        
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <div class="file-class">
                        <button type="button" class="layui-btn" id="upload-normal-expert">上传文件</button>
                        <input type="hidden" name="fileName" id="txurl" value="" />
                        <div class="layui-upload-list">
                            <p id="upload-file"></p>
                            <p id="test-upload-demoText"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<style>
    .test-file {
        margin: 0 5px 0 10px;
    }

    .file-class {
        margin-left: 80px;
        width: 500px;
    }
</style>

<script>

    var form = layui.form;
    var upload = layui.upload;
    form.render();
    var fileaccept = 'file';
    var fileacceptMime = 'application/pdf';
    var fileexts = 'pdf';
    var filesize = 0;

    //上传文件
    var uploadInst = upload.render({
        elem: '#upload-normal-expert'
        , accept: fileaccept
        , acceptMime: fileacceptMime
        , exts: fileexts
        , size: filesize
        , number: 1
        , auto: false
        , choose: function (obj) {
            $("#upload-file").empty();
            var files = this.files = obj.resetFile(); // 将每次选择的文件重置
            obj.preview(function (index, file, result) {
                var tr = $([' <label class="test-file"  id="test-upload-normal-file">' + file.name +
                    '</label><button class="layui-btn layui-btn-xs layui-btn-danger demo-delete" onclick="DeleteFiles()">删除</button>'].join(''));

                //删除
                tr.find('.demo-delete').on('click', function () {
                    delete files[index]; //删除对应的文件
                    tr.remove();
                    uploadInst.config.elem.next()[0].value = '';
                });

                $("#upload-file").append(tr);
                $("#txurl").val(file.name);
            });
        }
        , done: function (res) {
            //如果上传失败
            if (res.code < 0) {
                return layer.msg(res.msg);
            }
            layer.msg("文件上传成功");
        }
        , error: function () {
            //演示失败状态，并实现重传
            var demoText = $('#test-upload-demoText');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function () {
                uploadInst.upload();
            });
        }
    });

   
    //初始化的删除文件，只移除文件，保存了再删。
    function DeleteFiles() {
        $("#upload-file").empty();
        $("#txurl").val("");
    }

    //编辑-初始化赋值
    function setCode(url) {
        if (url != "") {
            var tr = $(['<label class="test-file" id="test-upload-normal-file">' + url
                + '</label><button class="layui-btn layui-btn-xs layui-btn-danger demo-delete" onclick="DeleteFiles()">删除</button>'].join(''))
            $("#upload-file").append(tr);
            $("#txurl").val(url);
        }
        
    }

</script>